@layout("/common/_container.html"){
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form form-board" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
            <input type="hidden" id="eleFenceId" name="eleFenceId" value="">

            <div class="layui-form-item">
                <div class="layui-block">
                    <label class="layui-form-label">围栏名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="fenceName" id="fenceName" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-block">
                    <label class="layui-form-label">围栏描述</label>
                    <div class="layui-input-block">
                        <textarea name="fenceDesc" id="fenceDesc" autocomplete="off"
                                  class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-block">
                    <label class="layui-form-label">从地图选取</label>
                    <div class="layui-input-block">
                        <div id="mapDiv" style="width:805px; height:340px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="eleFence-submit" id="eleFence-submit" value="确认">
            </div>
            <div class="layui-form-item layui-hide" id="points">

            </div>
        </div>
    </div>
</div>
<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=1ba730719590185255eb3bf61dfd70a6"
        type="text/javascript"></script>
<script>
    layui.config({
        base: Feng.ctxPath + '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate'], function () {
        var $ = layui.$
        , form = layui.form
        , laydate = layui.laydate;

        var map, zoom = 12, handler;
        //初始化地图对象
        map = new T.Map("mapDiv");
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
        //允许鼠标双击放大地图
        map.enableScrollWheelZoom();

        var config = {
            showLabel: true,
            color: "blue", weight: 3, opacity: 0.5, fillColor: "#ACD5F6", fillOpacity: 0.5
        };
        //创建标注工具对象
        polygonTool = new T.PolygonTool(map, config);

        //多边形工具
        openPolygonTool();

        // currentLnglats：用户当前绘制的多边形的点坐标数组。
        // currentArea：用户最后绘制的多边形的地理面积。
        // currentPolygon：当前所画多边形的对象。
        // allPolygons： 获取工具所有绘制的多边形。
        //{type,target,currentLnglats,currentArea,currentPolygon,allPolygons }
        var drawomplete = function (e) {
            // alert(e.type)
            // alert(e.target)
            // alert(e.currentLnglats)
            // alert(e.currentArea)
            // alert(e.currentPolygon)
            // alert(e.allPolygons)
            //console.log(e)
            var html = '<input type="hidden" name="point" value="1">';
            var point = '';
            for (i in e.currentLnglats) {
                point = e.currentLnglats[i];
                html += '<input type="hidden" name="details['+ i +'].lng" value="'+ point.lng +'">' +
                    '<input type="hidden" name="details['+ i +'].lat" value="'+ point.lat +'">' +
                    '<input type="hidden" name="details['+ i +'].pointNo" value="P'+i+'">';
            }
            $("#points").html(html);
        };

        handler.addEventListener('draw', drawomplete);

        function openPolygonTool() {
            if (handler) handler.close();
            handler = new T.PolygonTool(map);
            handler.open();
        }

    })
</script>
@}
